<template>
  <div class='mobile-score-wrapper'>
    <!-- 【注】 valid-tip-box 类名将作为paper页面的DOM索引，不能修改 -->
    <div class='valid-tip-box'
         v-if='question.validType === "required"'>
      请为所有选项打分
    </div>
    <ul class='option-list'>
      <li class='option-item'
          v-for='(option, index) of question.optionList'
          :key='index'>
        <!-- 如果只有一个打分选项，则不显示选项标题 -->
        <div class='item-title'
             v-show='question.optionList.length > 1'
             v-html='option.title'>
        </div>
        <div class='item-content'>
          <!-- 星级、喜欢、微笑、点赞 -->
          <ul class='score-img'
              v-if='extendAttr.scoreType !== "slider"'>
            <li class='img-item survey-evaluate-sprite-bg-mini'
                v-for='(score, scoreIndex) of scoreItems'
                :key='"img" + scoreIndex'
                :class='{
                  active: option.selectedScore >= score,
                  star: extendAttr.scoreType === "star",
                  like: extendAttr.scoreType === "like",
                  smile: extendAttr.scoreType === "smile",
                  praise: extendAttr.scoreType === "praise"
                }'
                @click='selectOption(option, score, scoreIndex)'>
              <div class='img-item-label'
                  :class='{
                    active: option.activeIndex === scoreIndex
                  }'>
                {{score}}
              </div>
            </li>
          </ul>
          <!-- 滑块 -->
          <div class='score-slider' v-if='extendAttr.scoreType === "slider"'>
            <div class='slider-box'>
              <slider
                v-model='option.selectedScore'
                :min='extendAttr.unitScore'
                :max='extendAttr.unitScore * extendAttr.scoreLevel'
                :step='extendAttr.unitScore'
                active-color='#2672ff'
                inactive-color='transparent'
                bar-height='4px'
                button-size='18px'
                :disabled='isRecord'
                @change='changeSliderValue($event, option)'>
                <template #button>
                  <div class="custom-button">
                    <div class='button-tip'>{{option.selectedScore}}</div>
                  </div>
                </template>
              </slider>
              <ul class='slider-rule'>
                <li class='rule-point'
                    v-for='(score, scoreIndex) of scoreItems'
                    :key='"slider" + scoreIndex'>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 打分描述 -->
        <div class='score-desc'
             v-show='extendAttr.leftTip || extendAttr.middleTip || extendAttr.rightTip'>
          <span class='desc-item left'>{{extendAttr.leftTip}}</span>
          <span class='desc-item middle'>{{extendAttr.middleTip}}</span>
          <span class='desc-item right'>{{extendAttr.rightTip}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import slider from 'vant/lib/slider'
import 'vant/lib/slider/style'
export default {
  name: 'mobileScore',
  data () {
    return {
      extendAttr: {
        scoreType: 'star',
        scoreLevel: 5,
        unitScore: 1,
        leftTip: '',
        middleTip: '',
        rightTip: ''
      },
      // selectedScore: -1,
      // activeIndex: -1, // 用于短暂展示选中的分值
      scoreItems: [] // 用于展示打分内容列表
    }
  },
  components: {
    slider
  },
  props: {
    question: {
      type: Object,
      default () {
        return {}
      }
    },
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    resetValidType () {
      this.question.validType = ''
    },
    changeSliderValue (value, option) {
      this.resetValidType()
      // 更新打分选中的层级
      option.scoreLevel = value / this.extendAttr.unitScore
      // console.log('changeSliderValue value: ', value)
      // console.log('changeSliderValue option: ', option)
    },
    selectOption (option, score, scoreIndex) {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      // 更新打分选中的层级
      option.selectedScore = score
      option.activeIndex = scoreIndex
      option.scoreLevel = scoreIndex + 1 // 最终作为接口参数记录的层级
      setTimeout(() => {
        option.activeIndex = -1
      }, 700)
      // console.log('selectOption: ', option)
    },
    init () {
      // 获取打分题的扩展配置项
      let extendAttr = JSON.parse(this.question.extendAttr || '{}')
      this.assignKey(this.extendAttr, extendAttr)
      // 初始化打分列表
      this.scoreItems = []
      let length = this.extendAttr.scoreLevel
      for (let i = 1; i <= length; i++) {
        this.scoreItems.push(this.extendAttr.unitScore * i)
      }
      // 初始化每个打分选项的数据
      this.question.optionList.forEach(option => {
        // 如果是滑块模式，则默认选中最低分值
        if (this.extendAttr.scoreType === 'slider') {
          option.selectedScore = this.extendAttr.unitScore
          option.scoreLevel = 1
        } else {
          option.selectedScore = -1
        }
        option.activeIndex = -1
      })
      // 如果是查看记录模式, 回显答题记录
      if (this.isRecord) {
        if (this.question.answer) {
          // let optionResults = this.question.answer.optionResults
          let optionResults = this.question.answer
          this.question.optionList.forEach(option => {
            let targetOption = optionResults.filter(item => item.optionId === option.optionId)[0]
            if (targetOption) {
              option.scoreLevel = targetOption.scoreLevel
              option.selectedScore = this.extendAttr.unitScore * option.scoreLevel
            }
          })
        }
      }
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.mobile-score-wrapper
  margin-top 10px
  .valid-tip-box
    color #ef6262
    font-size 14px
    margin-bottom 5px
  .option-list
    .option-item
      margin-bottom 20px
      &:last-child
        margin-bottom 0
      .item-title
        margin-bottom 10px
        line-height 1.4
        font-size 14px
        >>> img, >>> iframe, >>> video
          max-width 100%
      .item-content
        // 星级、喜欢、微笑、点赞
        .score-img
          height 36px
          border 1px solid #dde5ed
          border-radius 4px
          display flex
          align-items center
          justify-content space-between
          padding 0 5px
          .img-item
            position relative
            width 18px
            height 18px
            cursor pointer
            &.star
              background-position 0 -2px
            &.like
              background-position -20px -2px
            &.smile
              background-position -40px -2px
            &.praise
              background-position -60px -2px
            &.active
              &.star
                background-position 0 -22px
              &.like
                background-position -20px -22px
              &.smile
                background-position -40px -22px
              &.praise
                background-position -60px -22px
            .img-item-label
              position absolute
              left -3px
              right 0
              top -26px
              width 24px
              height 18px
              line-height 18px
              text-align center
              background #ffbe3a
              color #fff
              font-size 12px
              border-radius 4px
              padding 0 2px
              box-sizing border-box
              transform translateY(100%)
              opacity 0
              transition all linear 0.2s
              &.active
                transform translateY(0)
                opacity 1
        // 滑块
        .score-slider
          position relative
          height 36px
          border 1px solid #dde5ed
          border-radius 4px
          padding 0 15px
          display flex
          align-items center
          .slider-box
            position relative
            width 100%
            height 4px
            background #ccc
            .van-slider
              position absolute
              z-index 10
              &.van-slider--disabled
                opacity 1
              .custom-button
                position relative
                width 18px
                height 18px
                background #fff
                border-radius 50%
                box-shadow 0 1px 2px rgba(0,0,0,.3)
                &::after
                  position absolute
                  left 0
                  right 0
                  top 0
                  bottom 0
                  margin auto
                  content ''
                  width 14px
                  height 14px
                  background #2672ff
                  border-radius 50%
                .button-tip
                  position absolute
                  top -22px
                  left -4px
                  height 20px
                  line-height 22px
                  width 26px
                  text-align center
                  background #2672ff
                  color #fff
                  border-radius 4px
                  font-size 12px
                  padding 0 2px
                  box-sizing border-box
          .slider-rule
            display flex
            justify-content space-between
            .rule-point
              width 4px
              height 4px
              background #aaa
              border-radius 50%
      .score-desc
        display flex
        margin-top 10px
        .desc-item
          flex 1
          width 0
          no-wrap()
          font-size 12px
          color #aaa
          &.middle
            text-align center
          &.right
            text-align right
</style>
